<!-- 漏斗图 -->
<template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  
  const props = defineProps({
    id: {
      type: String,
      default: "funnelChart",
    },
    className: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "200px",
      required: true,
    },
    height: {
      type: String,
      default: "200px",
      required: true,
    },
  });
  
  const options = {
    title: {
      show: true,
      text: "订单线索转化漏斗图",
      x: "center",
      padding: 15,
      textStyle: {
        fontSize: 18,
        fontStyle: "normal",
        fontWeight: "bold",
        color: "#337ecc",
      },
    },
    grid: {
      left: "2%",
      right: "2%",
      bottom: "10%",
      containLabel: true,
    },
    legend: {
      x: "center",
      y: "bottom",
      data: ["Show", "Click", "Visit", "Inquiry", "Order"],
    },
  
    series: [
      {
        name: "Funnel",
        type: "funnel",
        left: "20%",
        top: 60,
        bottom: 60,
        width: "60%",
        sort: "descending",
        gap: 2,
        label: {
          show: true,
          position: "inside",
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: "solid",
          },
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        emphasis: {
          label: {
            fontSize: 20,
          },
        },
        data: [
          { value: 60, name: "Visit" },
          { value: 40, name: "Inquiry" },
          { value: 20, name: "Order" },
          { value: 80, name: "Click" },
          { value: 100, name: "Show" },
        ],
      },
    ],
  };
  
  const chart = ref<any>("");
  
  onMounted(() => {
    chart.value = markRaw(
      echarts.init(document.getElementById(props.id) as HTMLDivElement)
    );
  
    chart.value.setOption(options);
  
    window.addEventListener("resize", () => {
      chart.value.resize();
    });
  });
  
  onActivated(() => {
    if (chart.value) {
      chart.value.resize();
    }
  });
  </script>
  